<template>
	<view class="container">
		<!-- 费用信息 -->
		<view class="pay-info">
            <u-cell-group>
                <u-cell clickable title="医院" titleStyle="font-size: 28rpx;color: #B3BCCC;" :value="scheduleInfo?.hospital?.name">
                    <template #icon>
                        <view>
                            <u-image width="60rpx" height="60rpx" :src="getServerStatic('/static/images/a35.png')"></u-image>
                        </view>
                    </template>
                </u-cell>
                <u-cell clickable title="项目" titleStyle="font-size: 28rpx;color: #B3BCCC;" :value="projectInfo?.name">
                    <template #icon>
                        <view>
                            <u-image width="60rpx" height="60rpx" :src="getServerStatic('/static/images/a36.png')"></u-image>
                        </view>
                    </template>
                </u-cell>
                <u-cell clickable title="医生" titleStyle="font-size: 28rpx;color: #B3BCCC;" :value="scheduleInfo?.doctor?.name">
                    <template #icon>
                        <view>
                            <u-image width="60rpx" height="60rpx" :src="getServerStatic('/static/images/a37.png')"></u-image>
                        </view>
                    </template>
                </u-cell>
                <u-cell clickable title="就诊日期" titleStyle="font-size: 28rpx;color: #B3BCCC;" :value="(scheduleInfo.schedule_date) + ' ' + (scheduleInfo.start_time) + '-' + (scheduleInfo.end_time)">
                    <template #icon>
                        <view>
                            <u-image width="60rpx" height="60rpx" :src="getServerStatic('/static/images/a29.png')"></u-image>
                        </view>
                    </template>
                </u-cell>
                <u-cell clickable title="挂号费" titleStyle="font-size: 28rpx;color: #B3BCCC;" :value="'￥' + (scheduleInfo?.doctor?.cost)">
                    <template #icon>
                        <view>
                            <u-image width="60rpx" height="60rpx" :src="getServerStatic('/static/images/a29.png')"></u-image>
                        </view>
                    </template>
                </u-cell>
                <u-cell clickable title="问诊方式" titleStyle="font-size: 28rpx;color: #B3BCCC;" value="门诊问诊">
                    <template #icon>
                        <view>
                            <u-image width="60rpx" height="60rpx" :src="getServerStatic('/static/images/a38.png')"></u-image>
                        </view>
                    </template>
                </u-cell>
                <u-cell :border="false" required isLink clickable title="就诊人" titleStyle="font-size: 28rpx;color: #B3BCCC;" :value="patientName" @click="goVisitor">
                    <template #icon>
                        <view>
                            <u-image width="60rpx" height="60rpx" :src="getServerStatic('/static/images/a30.png')"></u-image>
                        </view>
                    </template>
                </u-cell>
            </u-cell-group>
		</view>

		<view class="tip-box">
			温馨提示：错过时间，请退号后重新预约。
		</view>
	</view>

	<view class="btn">
		<u-button throttleTime="1000" :customStyle="{height: '86rpx', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)', letterSpacing: '.1rem'}" :hairline="false" type="mini" shape="circle"
			color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)" @click="goPayment">确认预约</u-button>
	</view>

	<!-- 就诊人列表 -->
	<u-picker closeOnClickOverlay :show="show" :columns="columns" @cancel="show = false" @close="show = false" @confirm="show = false"></u-picker>
</template>

<script setup>
    import {ref, reactive, readonly} from 'vue'
    import {onLoad, onShow} from '@dcloudio/uni-app'
    import {appointmentConfirm, submitAppointment} from "@/api/order";
    import {getServerStatic} from "@/utils/tool";

    const loading = ref(true)

    const show = ref(false)
    const columns = reactive([
        ['中国', '美国', '日本']
    ]);
    // 跳转常用就诊人
    const goVisitor = () => {
        uni.navigateTo({
            url: `/mine/visitor/list?status=choose&schedule_id=${scheduleId.value}`
        })
    }

    const goBack = () => {
        uni.navigateBack()
    }

    const scheduleInfo = reactive({})
    const projectInfo = reactive({})

    // 参数
    const scheduleId = ref(0)
    const patientId = ref(0)
    const patientName = ref('请选择就诊人')

    onLoad( (evt) => {
        console.log("确认预约携带参数:", evt)
        scheduleId.value = evt?.schedule_id ?? 0


        if (scheduleId.value <= 0) {
            uni.showToast({
                mask: true,
                title: '参数错误',
                icon: 'error'
            })
            setTimeout(() => {
                goBack()
            },500)
            return
        }

        handleGetOrderConfirmData()
    })

    onShow((evt) => {
        console.log('onshow',evt)
        // 就诊人
        if (evt?.patient_id) {
            patientId.value = evt?.patient_id ?? 0
            patientName.value = evt?.patient_name ?? "请选择就诊人"
        }
    })

    const handleGetOrderConfirmData = async () => {
        loading.value = true
        const { code, data, message } = await appointmentConfirm({schedule_id: scheduleId.value})
        loading.value = false
        if (code === 1) {
            Object.assign(scheduleInfo, data?.scheduleInfo ?? {})
            Object.assign(projectInfo, data?.project ?? {})
        } else {
            uni.showToast({
                mask: true,
                title: message ?? "请求异常",
                icon: 'error'
            })
            return false
        }
    }

    // 下单
    const goPayment = async () => {
        if (patientId.value <= 0) {
            uni.showToast({
                mask: true,
                title: "请选择就诊人",
                icon: 'error'
            })
            return false
        }

        let params = {
            patient_id: patientId.value,
            project_id: projectInfo.id,
            schedule_id: scheduleId.value
        }

        const {code, data, message} = await submitAppointment(params)

        if (code == 1) {
            // todo 发起支付
            // 完成
            uni.navigateTo({
                url: `/mine/reservation/pay?orderId=${data.orderId}`
            })
        } else {
            uni.showModal({
                title: '提示',
                content: message ?? "下单出现异常",
                showCancel: false,
                success: function (res) {
                    if (res.confirm) {
                        console.log('用户点击确定');
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });

            return false
        }
    }

</script>

<style scoped lang="scss">
	.container {
		position: relative;
		z-index: 19;
		padding: 60rpx 26rpx;
	}

	.pay-info {
		background: #FFFFFF;
		border-radius: 30rpx;
	}
	.price-box {
		color: #D67354;
	}

	.tip-box {
		margin-top: 40rpx;
		padding: 0 80rpx;
		font-size: 26rpx;
		color: #B3BCCC;
		line-height: 43rpx;
	}

	.btn {
		padding: 0 55rpx;
		width: 100%;
		position: fixed;
		left: 50%;
		bottom: 70rpx;
		transform: translateX(-50%);
		z-index: 9;
	}
</style>
